<template>
  <div>
    <n-grid cols="1 s:1 m:3" responsive="screen" :x-gap="12">
      <n-gi span="1">
        <menu-tree
          ref="menuTreeRef"
          v-model:checked-menu="checkedMenu"
          @handle-add-root="showCreateDrawer(true)"
          @handle-add-child="showCreateDrawer(false)"
        />
      </n-gi>
      <n-gi span="1 s:1 m:2">
        <menu-item-form
          :menu="checkedMenu"
          @submit-success="handleRefresh"
          @remove-success="handleRefresh"
        />
      </n-gi>
    </n-grid>

    <create-drawer
      ref="createDrawerRef"
      :parent-menu="isAddRoot ? undefined : checkedMenu"
      @submit-success="handleRefresh"
    />
  </div>
</template>

<script lang="tsx" setup>
import { MenuTree, MenuItemForm, CreateDrawer } from "./components";

defineOptions({ name: "ManageMenu" });

const menuTreeRef = ref();
const createDrawerRef = ref();
const checkedMenu = ref<Menu>();
const isAddRoot = ref(false);

const showCreateDrawer = (addRoot: boolean) => {
  isAddRoot.value = addRoot;
  createDrawerRef.value.show();
};

const handleRefresh = () => {
  menuTreeRef.value.getMenuTree();
};
</script>
